<template>
  <div class="pre-inventory-container">
    <el-card shadow="never" class="header-card">
      <div class="page-header">
        <div class="header-content">
          <el-icon class="header-icon" :size="28"><Box /></el-icon>
          <div class="header-text">
            <h2>预盈库</h2>
            <p>管理盘盈商品入库前的临时库存</p>
          </div>
        </div>
        <div class="header-actions">
          <el-button type="success" @click="handleBatchProcess">
            <el-icon><Check /></el-icon>
            批量入库
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 统计信息 -->
    <div class="stats-row">
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#67C23A"><Box /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.totalItems }}</div>
            <div class="stat-label">待处理商品</div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#409EFF"><Tickets /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.totalQty }}</div>
            <div class="stat-label">盘盈总数量</div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#E6A23C"><Coin /></el-icon>
          <div class="stat-info">
            <div class="stat-value">¥{{ stats.totalAmount.toLocaleString() }}</div>
            <div class="stat-label">盘盈总金额</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 预盈库列表 -->
    <el-card shadow="never">
      <el-form :inline="true">
        <el-form-item label="任务单号">
          <el-input v-model="searchTaskNo" placeholder="任务单号" clearable style="width: 200px">
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="仓库">
          <el-select v-model="searchWarehouseId" placeholder="全部仓库" clearable style="width: 150px">
            <el-option
              v-for="warehouse in warehouses"
              :key="warehouse.id"
              :label="warehouse.name"
              :value="warehouse.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
        </el-form-item>
      </el-form>
      
      <!-- 任务筛选提示 -->
      <el-alert
        v-if="searchTaskNo"
        :title="`任务单 ${searchTaskNo} 的盘盈商品`"
        type="success"
        :closable="true"
        @close="searchTaskNo = ''"
        style="margin-top: 12px; margin-bottom: 12px;"
      >
        以下盘盈商品来自该任务单下的所有盘点单
      </el-alert>

      <el-table :data="preInventoryData" stripe border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="taskNo" label="任务单号" width="180">
          <template #default="{ row }">
            <el-link type="primary">{{ row.taskNo }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="sheetNo" label="来源盘点单" width="180">
          <template #default="{ row }">
            <el-link type="primary">{{ row.sheetNo }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="warehouseName" label="仓库" width="120" />
        <el-table-column prop="productCode" label="商品编码" width="150" />
        <el-table-column prop="productName" label="商品名称" min-width="200" />
        <el-table-column prop="profitQty" label="盘盈数量" width="120" align="right">
          <template #default="{ row }">
            <span class="profit-text">+{{ row.profitQty }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="unitPrice" label="单价" width="120" align="right">
          <template #default="{ row }">
            ¥{{ row.unitPrice.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="totalAmount" label="金额" width="150" align="right">
          <template #default="{ row }">
            <span class="profit-text">¥{{ row.totalAmount.toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="checkTime" label="盘点时间" width="180" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === 'pending' ? 'warning' : 'success'">
              {{ row.status === 'pending' ? '待入库' : '已入库' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="{ row }">
            <el-button link type="success" @click="handleProcess(row)" size="small" v-if="row.status === 'pending'">
              <el-icon><Check /></el-icon>
              入库
            </el-button>
            <el-button link type="primary" @click="handleViewDetail(row)" size="small">
              <el-icon><View /></el-icon>
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.pageSize"
          :total="pagination.total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Box, Check, Tickets, Coin, Search, View
} from '@element-plus/icons-vue'

const searchWarehouseId = ref(null)
const searchTaskNo = ref('')
const selectedRows = ref([])

const pagination = reactive({
  page: 1,
  pageSize: 20,
  total: 15
})

const stats = reactive({
  totalItems: 15,
  totalQty: 238,
  totalAmount: 456800
})

const warehouses = ref([
  { id: 1, name: '主仓库' },
  { id: 2, name: '分仓A' }
])

const preInventoryData = ref([
  {
    id: 1,
    taskNo: 'CHK202401150001',
    sheetNo: 'CHS202401150001',
    warehouseId: 1,
    warehouseName: '主仓库',
    productCode: 'P003',
    productName: 'AirPods Pro 2',
    profitQty: 5,
    unitPrice: 1899,
    totalAmount: 9495,
    checkTime: '2024-01-15 14:30:00',
    status: 'pending'
  },
  {
    id: 2,
    taskNo: 'CHK202401140002',
    sheetNo: 'CHS202401140003',
    warehouseId: 1,
    warehouseName: '主仓库',
    productCode: 'P005',
    productName: 'Apple Watch Series 9',
    profitQty: 3,
    unitPrice: 3199,
    totalAmount: 9597,
    checkTime: '2024-01-14 16:00:00',
    status: 'pending'
  }
])

const handleSelectionChange = (selection) => {
  selectedRows.value = selection
}

const handleProcess = (row) => {
  ElMessageBox.confirm('确定要将该商品入库吗？', '提示', {
    type: 'info'
  }).then(() => {
    row.status = 'processed'
    stats.totalItems--
    stats.totalQty -= row.profitQty
    stats.totalAmount -= row.totalAmount
    ElMessage.success('入库成功')
  }).catch(() => {})
}

const handleBatchProcess = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请先选择要入库的商品')
    return
  }
  
  ElMessageBox.confirm(`确定要将选中的${selectedRows.value.length}条商品入库吗？`, '提示', {
    type: 'info'
  }).then(() => {
    selectedRows.value.forEach(row => {
      row.status = 'processed'
      stats.totalItems--
      stats.totalQty -= row.profitQty
      stats.totalAmount -= row.totalAmount
    })
    ElMessage.success('批量入库成功')
  }).catch(() => {})
}

const handleViewDetail = (row) => {
  ElMessage.info(`查看详情：${row.productName}`)
}

const handleSearch = () => {
  ElMessage.success('搜索完成')
}
</script>

<style scoped>
.pre-inventory-container {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  color: #409EFF;
}

.header-text h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.header-text p {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: #909399;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  cursor: pointer;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-4px);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.profit-text {
  color: #67C23A;
  font-weight: 500;
}
</style>

